<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css"> <div class="mobile-nav"> <div class="menu-area"> <a href="#" class="hummenu" id="humMenu"><i class="bi bi-list"></i></a> </div> <div class="logo-area"> <a href="#"> <img src="img/logo-pink.svg" alt="" class="img-responsive"> </a> </div> <div class="cart-area"> <a href="#" class="cart-icon"> <span class="has-item"></span> <svg width="21px" height="21px" fill="#f1f1f1" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg> </a> </div> </div> <div class="slidemenu-overlay"></div> <div class="slidemenu" id="slidemenu"> <div class="slidemenu-header"> <a href="#" class="close-menu" id="closeMenu"><i class="bi bi-x-lg"></i></a> </div> <div class="slidemenu-menu-area"> <ul class="list-unstyled slidemenu-items"> <li><a href="#">Home</a></li> <li> <a href="#" data-toggle="collapse" data-target="#shop" class="collapsed">Shop Collection <i class="bi bi-plus-lg"></i><i class="bi bi-dash-lg"></i></a> <ul class="sub-menu list-unstyled collapse" id="shop"> <li><a href="#">Earrings</a></li> <li><a href="#">Bangles</a></li> </ul> </li> <li> <a href="#" data-toggle="collapse" data-target="#products" class="collapsed">Products <i class="bi bi-plus-lg"></i><i class="bi bi-dash-lg"></i></a> <ul class="sub-menu list-unstyled collapse" id="products"> <li><a href="#">Earrings</a></li> <li><a href="#">Bangles</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </div><!-- banner --> <div class="container"> <div class="row"> <br><br><br><br> <div class="col-md-12 text-center"><b>Mobile View</b></div> </div> </div>

.mobile-nav { display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: fixed; left: 0; right: 0; top: 0; height: 64px; background: #1f1f1f; z-index: 9; } @media (max-width: 992px) { .mobile-nav { display: -webkit-box; display: -ms-flexbox; display: flex; } } .mobile-nav .logo-area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .mobile-nav .logo-area a { padding: 15px; display: inline-block; } .mobile-nav .logo-area img { max-width: 20px; display: inline-block; } .mobile-nav .menu-area { width: 60px; } .mobile-nav .menu-area a.hummenu { font-size: 24px; display: inline-block; padding: 15px; color: #f1f1f1; } .mobile-nav .menu-area a.hummenu i { position: relative; top: 1px; } .mobile-nav .cart-area { width: 55px; margin-right: 5px; text-align: right; } .mobile-nav .cart-area a.cart-icon { display: inline-block; position: relative; padding: 15px; font-size: 18px; color: #333; } .mobile-nav .cart-area a.cart-icon svg { position: relative; top: 2px; } .mobile-nav .cart-area a.cart-icon .has-item { width: 6px; height: 6px; border-radius: 50%; background: #fc1d4d; position: absolute; top: 18px; right: 8px; } .slidemenu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 10; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s; pointer-events: none; } .slidemenu-overlay.open { pointer-events: auto; opacity: 1; } .slidemenu { position: fixed; z-index: 99; top: 0; bottom: 0; left: -320px; width: 320px; background: #1c1c1c; color: #f1f1f1; -webkit-transition: all 0.3s; transition: all 0.3s; } @media only screen and (max-width: 400px) { .slidemenu { left: -100%; width: 100%; } } .slidemenu .slidemenu-header { text-align: right; height: 52px; } .slidemenu .slidemenu-header .close-menu { display: inline-block; padding: 10px 15px; font-size: 20px; color: #fc1d4d; } .slidemenu .slidemenu-menu-area { height: calc(100vh - 52px); overflow-y: auto; } .slidemenu .slidemenu-items { padding: 10px 20px; } .slidemenu .slidemenu-items a { color: #f1f1f1; } .slidemenu .slidemenu-items > li { border-bottom: 1px solid #464646; } .slidemenu .slidemenu-items > li > a { padding: 15px 0px; display: block; position: relative; } .slidemenu .slidemenu-items > li > a:focus { text-decoration: none; } .slidemenu .slidemenu-items > li > a.collapsed .bi-dash-lg { display: none; } .slidemenu .slidemenu-items > li > a.collapsed .bi-plus-lg { display: inline-block; } .slidemenu .slidemenu-items > li > a .bi-dash-lg { display: inline-block; } .slidemenu .slidemenu-items > li > a .bi-plus-lg { display: none; } .slidemenu .slidemenu-items > li > a i { position: absolute; right: 0px; top: 15px; } .slidemenu .sub-menu { padding-left: 10px; } .slidemenu .sub-menu li a { display: block; padding: 8px 0px; font-size: 0.9em; color: #b0b0b0; } .slidemenu .sub-menu li:last-child { margin-bottom: 15px; } .slidemenu.menu-open { left: 0; }

$('#slidemenu').on('show.bs.collapse','.collapse', function() { $('#slidemenu').find('.sub-menu.in').collapse('hide'); }); $('#filterBox').on('show.bs.collapse','.collapse', function() { $('#filterBox').find('.sub-menu.in').collapse('hide'); }); $('#humMenu').click(function(){ $('#slidemenu').addClass('menu-open'); $('.slidemenu-overlay').addClass('open'); }); $('#closeMenu').click(function(){ $('#slidemenu').removeClass('menu-open'); $('.slidemenu-overlay').removeClass('open'); }); $('.slidemenu-overlay').click(function(){ $('#slidemenu').removeClass('menu-open'); $('#filterBox').removeClass('menu-open'); $(this).removeClass('open'); });